// 通过 webpack-merge 插件 合并配置文件
// const merge = require ('webpack-merge');
//获取 webpack.common.js 文件
// const common = require ('./webpack.common.js');

//在 node.js下获取 获取路径
const path = require ('path');

//引用本地 webpack 功能
const webpack = require ('webpack');

//引用html-webpack-plugin 生成新的HTML模板
const HtmlWebpackPlugin = require ('html-webpack-plugin');
//引用extract-text-webpack-plugin 把 CSS 分离成文件
const ExtractTextPlugin = require ('extract-text-webpack-plugin');
//引用clean-webpack-plugin 打包前先清除dist文件夹
const CleanWebpackPlugin = require ('clean-webpack-plugin');

//配置需要合并的文件
const connectJs = require ('./connect.config.json');

module.exports = {
  //定义打包入口
  entry: {
    main: './src/main.js',
    vendor: connectJs.autoloadJsFilePath,
  },
  //定义输出
  output: {
    path: path.resolve (__dirname, 'dist'),
    //[name]对应的是 entry中的"app.bundle"
    filename: '[name].js',
  },
  plugins: [
    //重构首页模板
    new HtmlWebpackPlugin ({
      template: './src/index.html',
      // filename: 'indexxxxx.html', //可以对文件重命名
      minify: {
        collapseWhitespace: false, //是否压缩
      },
      hash: false, //是否添加 哈希 值
    }),
    // HMR 模块热替换
    new webpack.NamedModulesPlugin (),
    new webpack.HotModuleReplacementPlugin (),
    //重构CSS文件
    new ExtractTextPlugin ('./index.css'),
    //抽离功能模块
    new webpack.optimize.CommonsChunkPlugin ({
      name: 'vendor',
      filename: '[name].js',
    }),
  ],
  module: {
    rules: [
      //处理 html 文件
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: false,
            },
          },
        ],
      },
      //处理 sass 文件
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract ({
          fallback: 'style-loader',
          use: ['css-loader?sourceMap', 'sass-loader?sourceMap'],
        }),
      },
      //处理 ES6 语法
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      //处理 图片 路径问题
      {
        test: /\.(gif|png|jpg)$/,
        // loader: 'url-loader?limit=8192&name=images/[name].[ext]',
        loader: 'url-loader?limit=1&name=images/[name].[ext]',
        // options: {
        //   publicPath: './images',
        // },
        //limit参数，代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录
        //name后面是打包后的路径；
        //loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用
        //上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。
      },
      //处理 SVG 文件
      {
        test: /\.(svg)$/,
        use: [
          {
            loader: 'file-loader?limit=1&name=images/[name].[ext]',
            // options: {
            //   name: '[name].[ext]?[hash]',
            //   outputPath: 'img/',
            // },
          },
          // {
          //   loader: 'image-webpack-loader',
          //   options: {
          //     bypassOnDebug: true,
          //   },
          // },
        ],
      },
      //处理字体
      {
        test: /\.(woff2?)$/,
        loader: 'url-loader?limit=10000',
      },
      // 字体文件都放到 fonts 目录中
      {
        test: /\.(woff2?)$/,
        loader: 'url-loader?limit=10000&name=[name].[ext]&outputPath=fonts/',
      },
      {
        test: /\.(ttf|eot)$/,
        loader: 'file-loader?name=[name].[ext]&outputPath=fonts/',
      },
    ],
  },
  //配置 webpack-dev-server 工作选项
  devServer: {
    port: 9680,
    open: false,
    hot: true,
  },
  //使用 source-map 工具 可以定位错误代码
  devtool: 'source-map',
};
